<template>
  <div>
    <el-dialog :visible.sync="dialogOpen" title="回款录入" width="30%" center :close-on-click-modal="false">
      <div class="box">
        <p> <span style="margin-bottom: 15px"
        >回款金额：</span>
          <el-input
              v-model="amount"
              size="small"
              style="width: 300px"
              placeholder="请输入回款金额"
          ></el-input
          >
        </p>
        <p style="width: 415px;margin-bottom: 10px"
           v-if="!isYiming"><span>已回款金额：</span>{{ staticMoney }}</p>
        <p v-if="!isYiming">
          <span style="margin-bottom: 15px"
          >报价单金额：</span>
          <el-input
              v-model="quoteAmount"
              size="small"
              style="width: 300px"
              placeholder="请输入报价单金额"
          ></el-input
          >
        </p>

        <p>
          <span style="margin-bottom: 15px"
          >付款方式：</span>
          <el-select
              size="small"
              style="width: 300px"
              placeholder="请选择付款方式"
              v-model.number="paymentMethod"
          >
            <el-option
                v-for="(item, index) in payTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </p>


        <span style="margin-bottom: 15px" v-if="false"
        >回款方式：
          <el-select
              v-model="type"
              size="small"
              style="width: 300px"
              placeholder="请选择回款方式"
          >
            <el-option :value="1" label="货架"></el-option> </el-select
          ></span>
        <p> <span style="margin-bottom: 15px"
        >回款时间： </span>
          <el-date-picker
              size="small"
              style="width: 300px"
              placeholder="请选择回款日期"
              v-model="payMethodTime"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </p>
        <div style="width: 71%; margin-top: 20px">
          回款截图：<span style="color: gray; font-size: 12px"
        >(粘贴复制即可上传图片)</span
        >
          <div class="div" style="display: flex; align-items: center">
            <div
                v-for="(v, i) in fileList"
                style="display: flex; align-items: center; margin-right: 10px"
            >
              <el-image
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
              >
              </el-image>
              <div @click="deletePaiedUrl(i)">
                <el-icon name="delete"></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialogOpen = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="detailDialog" title="回款详情" width="50%">
      <el-table
          :data="detailData"
          border
          height="calc(100vh - 250px)"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
          fontSize: '12px',
        }"
      >
        <el-table-column prop="amount" label="回款金额"></el-table-column>
        <el-table-column label="回款方式">
          <template v-slot:default="scope">
            <span v-if="scope.row.type == 1">货架</span>
            <span v-if="scope.row.type == 2">材料</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentTime" label="回款时间"></el-table-column>
        <el-table-column label="回款凭证">
          <template v-slot:default="scope">
            <el-image
                v-if="scope.row.prove"
                style="width: 50px"
                :src="'https://' + scope.row.prove"
                :preview-src-list="_imgRenders(scope.row.prove).map((img) => img)"
            ></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import store from '../../../store'
import _imgRenders from '../../../assets/js/dealPic.js'

export default {
  name: 'collectionOption',
  data() {
    return {
      payTypeList: [],
      isYiming: false,
      dialogOpen: false,
      detailDialog: false,
      collectId: '',
      staticMoney: '',
      amount: '',
      quoteAmount: '',
      fileList: [],
      payMethodTime: null,
      type: 1,
      detailData: [],
      paymentMethod: null, //付款方式
      host: this.$imgHost,
    }
  },
  computed: {
    preImgs() {
      return this.fileList.map((e) => `${this.$imgHost}${e}`)
    },
  },
  created() {
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    _imgRenders,
    handlePaste(event) {
      if (!this.dialogOpen) return
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file)
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    deletePaiedUrl(i) {
      this.fileList.splice(i, 1)
    },
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      axios
          .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: store.state.token,
            },
          })
          .then((response) => {
            this.fileList.push(response.data.result[0])
            // this.preSalesImgList.push('https://' + response.data.result[0]);
          })
          .catch((error) => {
          })
    },
    inCollect(row, type) {
      this.collectId = row.id
      this.quoteAmount = row.quoteAmount
      this.amount = ''
      this.staticMoney = row.payMoney
      this.payMethodTime = null
      this.fileList = []
      this.paymentMethod = null
      this.$api.orderGetPaymentMethod().then((res) => {
        this.payTypeList = []
        this.payTypeList = res
      })
      this.dialogOpen = true
      if (type == 14) {
        this.isYiming = true
      }
    },
    collectDetail(row) {
      const params = {
        pageSize: 200,
        pageNumber: 1,
        orderId: row.id,
      }
      this.$api.orderPaymentDetials(params).then((res) => {
        this.detailData = res.data
        this.detailDialog = true
      })
    },
    onConfirm() {
      let apiName = this.isYiming ? 'orderAddZYMCashPayment' : 'orderAddPayment'
      let data = {
        orderId: this.collectId,
        amount: this.amount,
        paymentMethod: this.paymentMethod,
        paymentTime: this.payMethodTime,
        prove: this.isYiming ? this.fileList.join(',') : this.fileList[0] || ''
      }
      // 只有非 isYiming 才需要这两个字段
      if (!this.isYiming) {
        data.type = this.type
        data.quoteAmount = this.quoteAmount
      }

      this.$api[apiName](data).then(() => {
        this.$message.success('提交成功！')
        this.dialogOpen = false
        this.$emit('addStatus', 1)
      })
    }
  },
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  flex-direction: column;
  align-items: center;

  span {
    display: inline-block;
    width: 90px;
  }
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}
</style>
